<template>
  <div>
    <!-- 添加按钮 -->
  <el-button type="primary" @click="dialogVisible = true">添加</el-button>
  <!-- 表格 -->
  <el-table
    :data="userList.filter(data=>data.name!==null).filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <!-- 表头 -->
    <el-table-column label="座位Id" prop="sid" width="80" align="center"></el-table-column>
    <el-table-column label="组号" prop="whichgroup" width="60" header-align="center" align="center"></el-table-column>
    <el-table-column label="学号" prop="number" width="120" header-align="center" align="center"></el-table-column>
    <el-table-column label="姓名" prop="name" width="100" header-align="center" align="center"></el-table-column>
    <el-table-column label="性别" prop="sex" :formatter=changeSex width="60" header-align="center" align="center"></el-table-column>
    <el-table-column label="年级" prop="grade" width="80" header-align="center" align="center"></el-table-column>
    <el-table-column label="专业" prop="major"  width="180" header-align="center" align="center"></el-table-column>
    <el-table-column label="现是否考研" prop="postgraduate" :formatter=changePostgraduate width="90" header-align="center" align="center"></el-table-column>
    <el-table-column label="手机号" prop="tel" width="130" header-align="center" align="center"></el-table-column>
    <el-table-column label="邮箱" prop="email" header-align="center" align="center"></el-table-column>
    <!-- 搜索框，修改删除 -->
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope"> 
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <!-- 修改和删除按钮 -->
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleUpdate(scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!-- 添加用户的对话框 -->
   <el-dialog title="学生信息" :visible.sync="dialogVisible" width="50%" @close="DialogClosed">
      <!-- 添加用户的表单 -->
      <el-form :model="form" label-width="90px" ref="myForm">
        <!-- 采集用户的姓名 -->
        <el-form-item label="房间号:" prop="xid">
          <el-input v-model.number="form.xid"></el-input>
        </el-form-item>
        <el-form-item label="列:" prop="yid">
          <el-input v-model.number="form.yid"></el-input>
        </el-form-item>
        <el-form-item label="行:" prop="zid">
          <el-input v-model.number="form.zid"></el-input>
        </el-form-item>
        <el-form-item label="学号:" prop="number">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="组号:" prop="whichgroup">
          <el-input v-model.number="form.whichgroup"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label=1>男</el-radio>
          <el-radio label=0>女</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="年级:" prop="grade">
          <el-input v-model.number="form.grade"></el-input>
        </el-form-item>
        <el-form-item label="专业:" prop="major">
          <el-input v-model="form.major"></el-input>
        </el-form-item>
        <el-form-item label="现是否考研:" prop="postgraduate">
          <el-radio-group v-model="form.postgraduate">
          <el-radio label=0>不考研</el-radio>
          <el-radio label=1>考研</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号:" prop="tel">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddNewUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户的对话框 -->
    <el-dialog title="学生信息" :visible.sync="updateDialogVisible" width="50%" @close="onDialogClosed">
      <el-form :model="updateData" label-width="90px" ref="myaddForm">
        <el-form-item label="组号:">
          <el-input v-model.number="updateData.whichgroup"></el-input>
        </el-form-item>
        <el-form-item label="学号:">
          <el-input v-model="updateData.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="updateData.name"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
        <el-radio-group v-model="updateData.sex">
          <el-radio :label=1>男</el-radio>
          <el-radio :label=0>女</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="年级:">
          <el-input v-model.number="updateData.grade"></el-input>
        </el-form-item>
        <el-form-item label="专业:">
          <el-input v-model="updateData.major"></el-input>
        </el-form-item>
        <el-form-item label="现是否考研:">
          <el-radio-group v-model="updateData.postgraduate">
          <el-radio :label=0>不考研</el-radio>
          <el-radio :label=1>考研</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="updateData.tel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="updateData.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="onUpdateNewUser">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
  export default {
    data() {
      return {
        userList:[],
        search: '',
        //控制添加对话框的显示与隐藏
        dialogVisible:false,
        //要采集的用户的信息对象
        form:{
          xid:'',
          yid:'',
          zid:'',
          number:'',
          name:'',
          whichgroup:'',
          sex:'',
          grade:'',
          major:'',
          postgraduate:'',
          tel:'',
          email:''
        },
        //修改dialog
        updateData:{},
        updateDialogVisible:false,
      }
    },
    mounted(){
      this.getUserList()
    },
    methods: {
       // 监听添加对话框关闭的事件
      DialogClosed(){
          // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
        this.$refs.myForm.resetFields()
        },
      // 获取用户列表的数据
      async getUserList() {
        let result = await this.$API.reqALLStudentByYids()
        if (result.status !== 200) return console.log('用户列表数据获取失败！')
        this.userList = result.data.data
      },
      // 将性别从0、1更改为男、女
    changeSex: function (row) {
            switch (row.sex) {
                case 0:
                    return "女";
                case 1:
                    return "男";
            }
        },
      // 更改是否考研信息
    changePostgraduate: function(row){
      switch(row.postgraduate) {
        case 0:
          return '不考研';
        case 1:
          return "考研"
      }
    },
      // 监听对话框关闭的事件
      onDialogClosed() {
      // 拿到 Form 组件的引用，调用 resetFields 函数，即可重置表单
      this.$refs.myaddForm.resetFields()
      },
      //用户点击了添加按钮
      async onAddNewUser() {
        let newForm={
          sid:this.form.sid,
          number:this.form.number,
          name:this.form.name,
          whichgroup:Number(this.form.whichgroup),
          sex:Number(this.form.sex),
          grade:this.form.grade,
          major:this.form.major,
          postgraduate:Number(this.form.postgraduate),
          xid:this.form.xid,
          yid:this.form.yid,
          zid:this.form.zid,
          tel:this.form.tel,
          email:this.form.email
        }
        let result = await this.$API.reqAdd(newForm);
        if (result.status !== 200) return this.$message.error('添加用户失败！')
       this.$message.success('添加成功！')
        this.dialogVisible = false
        this.getUserList()
      },
      // 点击了删除的链接
      async handleDelete(row){
    // 询问用户是否删除
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)
      // 判断是否点击了确认按钮
      if (confirmResult !== 'confirm') return this.$message.info('取消了删除！')
      // 发起请求，删除指定 id 的数据
        let stuDelete = {
          xid:row.xid,
          yid:row.yid,
          zid:row.zid
        }
      let result = await this.$API.reqdelete(stuDelete)     
      if (result.status == 200){
        this.$message.success('删除成功！')
      }else{
        this.$message.error('删除失败！')
      }
      // 提示删除成功，并刷新列表数据
       this.getUserList()
      },
      // 修改
      handleUpdate(row){
        this.updateDialogVisible = true;
        this.updateData=row;
        console.log(row);
        
      },
      async onUpdateNewUser(){
        let newUpdateData={
          number:this.updateData.number,
          name:this.updateData.name,
          sex:this.updateData.sex,
          grade:this.updateData.grade,
          major:this.updateData.major,
          postgraduate:this.updateData.postgraduate,
          sid:this.updateData.sid,
          xid:this.updateData.xid,
          yid:this.updateData.yid,
          zid:this.updateData.zid,
          whichgroup:this.updateData.whichgroup,
          tel:this.updateData.tel,
          email:this.updateData.email
        }
        let result = await this.$API.reqUpdate(newUpdateData)
        if (result.status !== 200) return this.$message.error('修改用户失败！')
       this.$message.success('修改成功！')
        this.updateDialogVisible = false
        this.getUserList()
      }
    },
  }
</script>